[data-type="range"] {
  & .formkit-inner {
    border: 0;
    box-shadow: none;
  }

  & .formkit-inner:focus-within {
    border: 0;
    box-shadow: none;
  }

  & input {
    padding-left: 0;
    padding-right: 0;

    &[disabled] {
      background: transparent;
    }

    &::-webkit-slider-runnable-track {
      background-color: var(--fk-color-border);
      height: 4px;
      border-radius: 4px;
    }

    &::-webkit-slider-thumb {
      appearance: none;
      position: relative;
      transform: translateY(calc(-50% + 2px));
      width: 1em;
      height: 1em;
      border-radius: 1em;
      background-color: var(--fk-color-range-thumb);
      border: 0;
    }

    &::-moz-range-track {
      background-color: var(--fk-color-border);
      height: 4px;
      border-radius: 4px;
      border: 1px solid transparent;
    }

    &::-moz-range-thumb {
      appearance: none;
      position: relative;
      width: 1em;
      height: 1em;
      border-radius: 1em;
      background-color: var(--fk-color-range-thumb);
      border: 1px solid var(--fk-color-range-thumb);
    }

    &:focus::-webkit-slider-thumb {
      outline: var(--fk-focus-ring) solid var(--fk-focus-ring-color);
    }

    &:focus::-moz-range-thumb {
      outline: var(--fk-focus-ring) solid var(--fk-focus-ring-color);
    }

    &[disabled]::-webkit-slider-thumb {
      background-color: var(--fk-color-border);
    }

    &[disabled]::-moz-slider-thumb {
      background-color: var(--fk-color-border);
    }
  }
}
